<template>
  <div style="display: flex; flex-direction: column">
    <div
      style="
        width: 300px;
        background: orange;
        color: white;
        height: 20px;
        text-align: center;
        line-height: 20px;
        padding: 5px 0;
      "
    >
      wake
    </div>
    <div
      style="
        width: 100%;
        display: flex;
        flex-direction: column;
        height: 190px;
        align-items: center;
        justify-content: center;
        background: black;
        color: white;
      "
    >
      <div style="display: flex; align-items: center; height: 30px">
        延时：
        <div
          type="text"
          disabled
          style="width: 100px; height: 20px; background: grey; overflow: hidden"
        >
          {{ delay }}
        </div>
      </div>
      <div style="display: flex; align-items: center">
        <div style="display: flex; align-items: center; width: 100px">
          MAC地址：
        </div>
        <div
          type="text"
          disabled
          style="
            width: 150px;
            height: 20px;
            background: grey;
            overflow: hidden;
            color: black;
          "
        >
          {{ instructionData }}
        </div>
      </div>
      <div style="display: flex; align-items: center">
        <div style="display: flex; align-items: center; width: 100px">
          广播IP：
        </div>
        <div
          type="text"
          disabled
          style="
            width: 150px;
            height: 20px;
            background: grey;
            overflow: hidden;
            color: black;
          "
        >
          {{ ipAddress }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ButtonCombination",
  inject: ["getNode"],
  data() {
    return {
      instructionData: null,
      ipAddress: null,
      eventType: 10,
      delay: 0,
    };
  },
  mounted() {
    const self = this;
    const node = this.getNode();
    node.on("change:data", ({ current }) => {
      if (current === undefined) {
        self.instructionData = null;
        self.ipAddress = null;
        self.delay = 0;
        return;
      }
      self.instructionData = current.instructionData;
      self.ipAddress = current.ipAddress;
      self.delay = current.delay;
    });
  },
};
</script>

<style>
</style>